<template>
    <div>
         <ul class="nUls">
             <!-- <li v-for="(ele,index) in proArr" :key="index" >{{ele}}</li> -->
             <li class="active"> <router-link to="/proDt">开发动态</router-link></li>
            <li @click="fn"><router-link to="/proDt/compNotice">公司公告</router-link></li>
            <li><router-link to="/proDt/indNews">行业动态</router-link></li>
        </ul>
         <router-view></router-view>
    </div>
   
</template>
<script>
export default {
  mounted() {
    var uls = document.querySelector(".nUls");
    var lis = uls.children;

    for (let i = 0; i < lis.length; i++) {
      lis[i].onclick = function() {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "active";
      };
    }
    // 根据判断url路径判断 ul的添加移除
    if (this.$router.history.current.path == "/proDt"||
          this.$router.history.current.path == "/proDt/compNotice"||
          this.$router.history.current.path == "/proDt/indNews"
      ) {
      
        this.$parent.$children[1].flag = false
        
      }
    // var uls = document.querySelector(".nUls");
    // var lis = uls.children;
    // //JS事件委托
    // uls.onclick = function(evt) {
    //   var evt = evt || window.event;
    //   var target = evt.target || evt.srcElement;
    //   //console.log(target);
    //   for (var j = 0; j < uls.children.length; j++) {
    //     uls.children[j].className = "";
    //   }
    //   target.className = "active";
    // };
  },
  methods: {
    fn() { console.log(this.$router.history.current.path )
      if (this.$router.history.current.path == "/proDt"
          
      ) {
      console.log(this.$parent.$children[1].flag)
        this.$parent.$children[1].flag = false
      }
    }
  }
};
</script>
<style>
.nUls {
  display: flex;
  height: 1rem;
  justify-content: space-around;
  align-self: center;
  line-height: 1rem;
  padding: 0 0.2rem;
}
.nUls li {
  text-align: center;
  flex: 1;
  color: #555;
  font-size: 0.3rem;
}
.active {
  border-bottom: 2px solid green;
}
</style>

